<template>
  <ul>
    <li
      v-for="product in products"
      :key="product.id">
      {{ product.title }} - {{ product.price | currency }}
      <br>
      <button
        :disabled="!product.inventory"
        @click="addProductToCart(product)">
        Add to cart
      </button>
    </li>
  </ul>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: mapState({
    products: state => state.products.all
  }),
  methods: {
    ...mapActions('cart', [
      'addProductToCart'
    ]),
    ...mapActions('products', [
      'getAllProducts'
    ]),
    async helloAsync() {
      const result = await new Promise((resolve) =>
          setTimeout(() => resolve("Hello"))
      );
      // console.log(result); // Hello
      return result
    },
    showArgs(...args) {
      console.log(args[0])
      let arr = []
      arr.push(args)
      console.log('...Array', arr)
    }
  },
  async created () {
    // const result = await this.helloAsync()
    // console.log('result', result)
    await this.getAllProducts()
    console.log('dispatch会先执行么')
    this.showArgs(1, 2, 3)
    // this.$store.dispatch('users/getAllProducts')
  }
}

</script>